<template>
  <div class="details">
    <div class="header">
      <navigator
        url="../partition/index"
        open-type="switchTab"
        hover-class="other-navigator-hover"
      >
        <span>返回</span>
      </navigator>
      <span class="span">{{ title }}</span>
    </div>
    <div class="tabs">
      <span
        v-for="(item, index) in details"
        :key="index"
        @click="changeIndex(index)"
        :class="tabIndex == index ? 'active' : ''"
        >{{ item.name }}</span
      >
    </div>
    <div class="content">
      <dl v-for="(item, index) in content" :key="index">
        <dt><img :src="item.pic" /></dt>
        <dd>
          <p>{{ item.title }}</p>
          <p><span>UP</span>{{ item.owner.name }}</p>
          <p>
            <span
              ><i class="iconfont icon-lanlvtubiaozhizuomoban-23"></i
              >{{ (item.stat.view / 10000).toFixed(1) }}万</span
            >
            <span
              ><i class="iconfont icon-xinxi"></i
              >{{ (item.stat.danmaku / 10000).toFixed(1) }}万</span
            >
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import Plist from "./../../static/Partition.json";
import HisPlay from "../../static/HisPlay.json";
import "../../static/分区详情/iconfont.css";
export default {
  data() {
    return {
      details: [],
      tabIndex: 0,
      content: [],
      title: "",
    };
  },
  onShow() {
    //初始数据
    this.content = HisPlay.data.archives.filter((item) => {
      if (this.details[0].name) {
        return item.tname === this.details[0].name;
      }
    });
  },
  methods: {
    //点击高亮切换数据
    async changeIndex(index) {
      this.tabIndex = index;
      this.content = await HisPlay.data.archives.filter((item) => {
        return this.details[index].name == item.tname;
      });
    },
  },

  onLoad(options) {
    //获取详情标题
    let details = Plist.data.filter((item) => {
      return item.rid == options.rid;
    })[0];
    this.details = details.children;
    this.title = details.name;
  },
};
</script>

<style lang='scss' scoped>
.active {
  color: red;
}
.header {
  width: 100%;
  height: 280rpx;
  position: relative;
  background: #f5f5f5;
  position: fixed;
  top: -70rpx;
  left: 0rpx;
  display: flex;
  align-items: center;
  span{
    font-size: 28rpx;
  }
  .span {
    font-size: 28rpx;
    margin-left: 300rpx;
  }
}
.tabs {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ccc;
  position: fixed;
  background: #f5f5f5;
  top: 120rpx;
  left: 0rpx;
  span {
    font-size: 26rpx;
  }
}
.content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 210rpx;
  dl {
    width: 100%;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
    dt {
      width: 35%;
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 90%;
        height: 180rpx;
      }
    }
    dd {
      width: 65%;
      display: flex;
      flex-direction: column;
      p:nth-child(1) {
        width: 96%;
        height: 80rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-wrap: wrap;
      }
      p:nth-child(2) {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        span {
          width: 40rpx;
          height: 24rpx;
          border: 1px solid #ccc;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10rpx;
          font-size: 20rpx;
        }
      }
      p:nth-child(3) {
        display: flex;
        align-items: center;
        width: 400rpx;
        justify-content: space-between;
        span {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #ccc;
          i {
            font-size: 40rpx;
          }
        }
      }
    }
  }
}
</style>